<div>
	<br />
	<label>Course name</label> &nbsp;
	<?php
		  // Fill training course list
	      $query = "SELECT Training_ID, CourseName FROM Training";
		  
		  if($result = mysql_query($query))
		  {
		    if($success = mysql_num_rows($result) > 0)
		    {
		      $selectedid = $this->session->userdata('courseId');
			  $this->session->unset_userdata('courseId');
			  
		      echo "<select id='courseNameList' name='courseNameList' width='200px'>\n";
				
		      //echo "<option>-- '$selectedid' --</option>\n";
		    
		      $result = mysql_query($query);
		      while ($row = mysql_fetch_array($result))
		      {
		        $Id = $row['Training_ID'];
		        $name = $row['CourseName'];
				if ($Id == $selectedid)
		        	echo "<option value='$Id' selected='selected'>$name</option>\n";
				else
					echo "<option value='$Id'>$name</option>\n";
		      }
		      echo "</select>\n";
			}
		  }
		  
		  echo "&nbsp;<label>Staff</label> &nbsp;";
		  
		  // Fill staff list
		  $query = "SELECT Staff_ID, FullName FROM Staff";
		  
		  if($result = mysql_query($query))
		  {
		    if($success = mysql_num_rows($result) > 0)
		    {
		      echo "<select id='staffList' name='staffList' width='200px'>\n";
		      //echo "<option>-- All courses --</option>\n";
		    
		      $result = mysql_query($query);
		      while ($row = mysql_fetch_array($result))
		      {
		        $Id = $row['Staff_ID'];
		        $name = $row['FullName'];
		        echo "<option value='$Id'>$Id - $name</option>\n";
		      }
		      echo "</select>\n";
			}
		  } 
	?>
	<!--<select id="courseNameList"></select>-->
	<button id='assignStaffButton'>Assign</button>
</div>
<div class="add_delete_toolbar" /><br />
<div id="example_wrapper" class="dataTables_wrapper" role="grid">
	<table cellpadding="0" cellspacing="0" border="0" id="example" class='display dataTable'>
	<thead>
		<tr>
			<th width="3%">Training_ID</th>
			<th width="10%">CourseName</th>
			<th width="10%">Staff_ID</th>
			<th width="15%">FullName</th>
			<th width="15%">TRN_Achivement</th>
			<th width="10%">Actual</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td colspan="5" class="dataTables_empty">Loading data from server</td>
		</tr>
	</tbody>
</table>
</div>
<script>
	$(document).ready(function() {
						oTable = $('#example').dataTable( {
							"bJQueryUI": true,
                    		"sPaginationType": "full_numbers",
							"bProcessing": true,
							"sAjaxSource": '<?php echo base_url()?>training/getstaffassigntable',
							"bStateSave": true,			        
							"bScrollCollapse": true
						}).makeEditable({
							sAddDeleteToolbarSelector: ".dataTables_length",
							sUpdateURL: '<?php echo base_url()?>training/updatestafftraining',
							sDeleteURL: '<?php echo base_url()?>training/unassign',
							oDeleteRowButtonOptions: {
								label: "Remove",
                                icons: { primary: 'ui-icon-trash' }
                           	},
                           	"aoColumns" : [
                                            null,
                                            null,
                                            null,
                                            null,
                                            {},
                                            {}                                                   
                                        ]
							// + fnGetSelectedStaffId(oTable)
							//$(#'btnDeleteRow').click(function () {
								
							//})
						}),
						
						// Handle table click event
						$("#example tbody").click(function(event) {
							var anSelected = fnGetSelectedStaffId(oTable);
							if (anSelected != null)
							{
								//alert(anSelected);
								var data = 'Staff_ID=' + anSelected;
								//start the ajax
						        $.ajax({
						            //this is the php file that processes the data
						            url: "<?php echo base_url()?>training/storestaffid",
						             
						            //POST method is used
						            type: "POST",
						 
						            //pass the data        
						            data: data,  
						             
						            //Do not cache the page
						            cache: false,
	
									//success
									success: function () {
     
									}
						        });
							}
						}),
						
						//if assign button is clicked
    					$('#assignStaffButton').click(function () {
    						//Get the data from all the fields
					        var trainingid = $('select[name=courseNameList]');
					        var staffid = $('select[name=staffList]');
					        var staffname = $("#staffList option:selected").text();
					        var coursename = $("#courseNameList option:selected").text();
    						//organize the data properly
					        var data = 'Training_ID=' + trainingid.val() + '&Staff_ID=' + staffid.val() + '&Staff_Name=' + staffname + '&CourseName=' + coursename;


					         
					        //start the ajax
					        $.ajax({
					            //this is the php file that processes the data
					            url: "<?php echo base_url()?>training/addstafftocourse",
					             
					            //POST method is used
					            type: "POST",
					 
					            //pass the data        
					            data: data,    
					             
					            //Do not cache the page
					            cache: false,

								//success
								success: function () {
									//alert("ok");
									// Re-draw the table
  									oTable.fnReloadAjax();
  									//alert("oTable");       
								},
								error: function(jqXHR, textStatus, errorThrown){
									var rawMessage = jqXHR.responseText;
									var message = rawMessage.substring(rawMessage.indexOf("<p>") + 3, rawMessage.indexOf("</p>"));
									if (message != null || message.length >0)
										alert(message);
								}
					        });
					         
					        //cancel the submit button default behaviours
					        return false;
    					})
						//$( function() { $('#courseNameList').combobox(); });
					});
	
	// Get staffId of current selected row
	function fnGetSelectedStaffId( oTableLocal )
    {
        var aReturn = new Array();
        var aTrs = oTableLocal.fnGetNodes();
 
        for ( var i=0 ; i<aTrs.length ; i++ )
        {
            if ( $(aTrs[i]).hasClass('row_selected') )
            {
                aReturn.push( aTrs[i] );
            }
        }
        
        if (aReturn.length > 0)
		{
			var data = oTable.fnGetData(aReturn[0]);
			if (data!=null)
				return data[2];
				//alert(data[2]);
				//window.location = "<?php echo base_url()?>training/assign/" + data[0];
		}
        
        return null;
    }
</script>